<template>
  <el-card class="box-card" shadow="never">
    <template v-slot:header>
      <div class="clearfix">
        <span>{{ i18n('contact.basic_info') }}</span>
      </div>
    </template>
    <div class="text item">
      <el-descriptions border>
        <!-- 第一行 -->
        <el-descriptions-item width="200" :label="i18n('contact.name')" label-align="right">
          {{ dataForm.name }}
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.sex')" label-align="right" :span="2">
          {{ dataForm.mobile }}
        </el-descriptions-item>

        <!-- 第二行 -->
        <el-descriptions-item width="200" :label="i18n('contact.position')" label-align="right">
          {{ dataForm.position }}
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.working_hours')" label-align="right">
          {{ dataForm.working_hours }}年
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.brithday')" label-align="right">
          {{ dataForm.brithday }}
        </el-descriptions-item>

        <!-- 第三行 -->
        <el-descriptions-item width="200" :label="i18n('contact.sex')" label-align="right">
          {{ dataForm.sex }}
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.is_principal')" label-align="right">
          {{ dataForm.is_principal }}
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.is_policymaker')" label-align="right">
          {{ dataForm.is_policymaker }}
        </el-descriptions-item>

        <!-- 第四行 -->
        <el-descriptions-item width="200" :label="i18n('contact.marriage_state')" label-align="right">
          {{ dataForm.marriage_state }}
        </el-descriptions-item>
        <el-descriptions-item width="200" :label="i18n('contact.child_total')" label-align="right" :span="2">
          {{ dataForm.child_total }}
        </el-descriptions-item>

        <!-- 第五行 -->
        <el-descriptions-item width="200" :label="i18n('contact.relation')" label-align="right" :span="3">
          {{ dataForm.relation }}
        </el-descriptions-item>

        <!-- 第六行 -->
        <el-descriptions-item width="200" :label="i18n('contact.interest')" label-align="right" :span="3">
          {{ dataForm.interest }}
        </el-descriptions-item>

        <!-- 第七行 -->
        <el-descriptions-item width="200" :label="i18n('contact.value_concept')" label-align="right" :span="3">
          {{ dataForm.value_concept }}
        </el-descriptions-item>

        <!-- 第八行 -->
        <el-descriptions-item width="200" :label="i18n('contact.remark')" label-align="right" :span="3">
          {{ dataForm.remark }}
        </el-descriptions-item>

      </el-descriptions>
    </div>
  </el-card>
</template>

<script setup name="contact-basic-index">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"

  const { router, query, i18n } = useBase()

  const props = defineProps({
    model: {
      type: [String, Object],
      default: null,
    }
  });

  const dataForm = reactive({
    id: 0,
    name: '',
    sex: '',
    mobile: '',
    position: '',
    working_hours: '',
    brithday: '',
    is_principal: '',
    is_policymaker: '',
    marriage_state: '',
    child_total: '',
    relation: '',
    interest: '',
    value_concept: '',
    remark: '',
  })

  const { formRef } = useForm(props.model, dataForm)

  const init = (form) => {
    dataForm.id = query.id || 0

    nextTick(() => {
      if (dataForm.id) {
        $http({
          url: $http.adornUrl(`/${props.model}/view/${dataForm.id}`),
          method: 'get',
          params: $http.adornParams({}),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            dataForm.name = data.data.name
            dataForm.sex = data.data.sex.text
            dataForm.mobile = data.data.mobile
            dataForm.position = data.data.position
            dataForm.working_hours = data.data.working_hours
            dataForm.brithday = data.data.brithday
            dataForm.is_principal = data.data.is_principal.text
            dataForm.is_policymaker = data.data.is_policymaker.text
            dataForm.marriage_state = data.data.marriage_state.text
            dataForm.child_total = data.data.child_total
            dataForm.relation = data.data.relation
            dataForm.interest = data.data.interest
            dataForm.value_concept = data.data.value_concept
            dataForm.remark = data.data.remark
          }
        }).then(() => {
          if (dataForm.id) {
            // $http({
            //   url: $http.adornUrl(`/${model.value}/detail/data`),
            //   method: 'get',
            //   params: $http.adornParams({
            //     'contact_id': dataForm.id
            //   }),
            // }).then(({ data }) => {
            //   if (data && data.status === 200) {
            //     dataForm.content = data.data.content
            //   }
            // })
          }
        })
      }
    })
  }

  onMounted(() => {
    init(formRef)
  })
</script>
